<template>
	<view :class="[infoState == true? 'menuHeader hd_active':'menuHeader']">
		<view class="menu_hd">
			<uni-icons type="left" size="26" @tap="getPrev" :color="`${maskClass}`"></uni-icons>
			<view class="user" v-show="infoState">
				<image class="u_img" :src="`${user.user_photo}`" mode=""></image>
				<view class="u_like">
					关注
				</view>
			</view>
			<view class="hd-r">
				<!-- 朋友圈 -->
				<uni-icons size="26" type="pyq" :color="`${maskClass}`"></uni-icons>
				<!-- 微信 -->
				<uni-icons size="26" type="weixin" :color="`${maskClass}`"></uni-icons>
				<!-- 分享 -->
				<uni-icons type="more-filled" @tap="maskShare" :color="`${maskClass}`" size="26"></uni-icons>
			</view>
		</view>
		<!-- 分享面板 -->
		<view class="mask" v-show="maskShow" @tap.stop="maskShare">
			<view class="mask_share" @tap.stop :class="maskState == false ? 'mask_out_active':'mask_in_active'">
				<!-- 图标 -->
				<view class="share_icon">
					<view class="share_contaiern">
						<view class="icon_bg">
							<uni-icons size="30" type="weixin" color="#fff"></uni-icons>
						</view>
						<view class="icon_txt">
							微信
						</view>
					</view>
					<view class="share_contaiern">
						<view class="icon_bg">
							<uni-icons size="30" type="pyq" color="#fff"></uni-icons>
						</view>
						<view class="icon_txt">
							朋友圈
						</view>
					</view>
					<view class="share_contaiern">
						<view class="icon_bg_weibo">
							<uni-icons size="30" type="weibo" color="#fff"></uni-icons>
						</view>
						<view class="icon_txt">
							微博
						</view>
					</view>
					<view class="share_contaiern">
						<view class="icon_bg_qq">
							<uni-icons size="30" type="qq" color="#fff"></uni-icons>
						</view>
						<view class="icon_txt">
							QQ
						</view>
					</view>
				</view>

				<!--  -->
				<view class="share_icon">
					<view class="share_contaiern">
						<view class="icon_bg_two">
							<uni-icons size="30" type="image" color="#000"></uni-icons>
						</view>
						<view class="icon_txt">
							分享海报
						</view>
					</view>
					<view class="share_contaiern">
						<view class="icon_bg_two">
							<uni-icons size="30" type="info" color="#000"></uni-icons>
						</view>
						<view class="icon_txt">
							举报
						</view>
					</view>
					<view class="share_contaiern">
						<view class="icon_bg_two">
							<uni-icons size="30" type="link" color="#000"></uni-icons>
						</view>
						<view class="icon_txt">
							复制链接
						</view>
					</view>
					<view class="share_contaiern ">
						<view class="icon_bg_two">
							<uni-icons size="30" type="star" color="#000"></uni-icons>
						</view>
						<view class="icon_txt">
							收藏
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "menuHeader",
		props: ["user", "infoState"],
		data() {
			return {
				maskShow: false, //延时 隐藏  遮罩层
				maskState: false, //分享面板状态  
				infoState: false, //距离top
				bgPraram: 0,
			};
		},
		computed: {
			maskClass() {
				return this.infoState == false ? '#ffffff' : '#000000'
			},
		},
		watch: {
			// infoState(val) {
			// 	this.bgPraram = String(val).split("").slice(0, 1)
			// 	console.log(String(val).split("").slice(0, 1), '数值变化')
			// }
		},
		methods: {
			// 分享 遮罩层
			maskShare() {
				this.maskState = !this.maskState;
				setTimeout(() => {
					// 延时隐藏
					this.maskShow = !this.maskShow;
				}, 300)
				// console.log('分享--->', this.maskState)
			},
			getPrev() {
				this.$router.go(-1)
			}
		}
	}
</script>

<style lang="scss">
	.menuHeader {
		width: 100%;
		height: 90rpx;
		// background-color: #ccc;
		// padding: 16rpx 0;
		position: fixed;
		z-index: 99;
		background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));

		// background: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0));
		// border-bottom: 1rpx solid tra;
		box-sizing: border-box;
		transition: all .3s ease;

		.menu_hd {
			height: 100%;
			width: 94%;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			// color:#fff !important;
			

			.user {
				width: 40%;
				display: flex;
				align-items: center;

				// justify-content: space-between;
				.u_img {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
				}

				.u_like {
					width: 160rpx;
					height: 62rpx;
					line-height: 62rpx;
					font-size: 20rpx;
					text-align: center;
					background-color: #FFC533;
					border-radius: 50rpx;
					font-weight: 600;
					color: #564A2C;
					margin: 0 20rpx;
				}
			}

			.hd-r {
				width: 42%;
				display: flex;
				justify-content: space-between;
				align-items: center;

			}
		}
	}

	.hd_active {
		background: #FFFFFF !important;
		// border-bottom: 1rpx solid rgb(236, 236, 236);
	}

	// 分享面板
	// 
	.mask {
		width: 100vw;
		height: 100vh;
		position: absolute;
		background-color: rgba(0, 0, 0, .2);
		top: 0;
		z-index: 99;
	}

	.mask_share {
		width: 100%;
		height: 500rpx;
		background-color: #fff;
		position: absolute;
		bottom: 0;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		z-index: 99;

		// 图标
		.share_icon {
			margin: 30rpx 0;
			display: flex;
			justify-content: space-around;
			// background-color: #007AFF;
			width: 100%;
			height: 180rpx;

			.share_contaiern {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;

				.icon_bg {
					padding: 20rpx;
					background-color: #48D026;
					border-radius: 50%;
				}

				.icon_bg_two {
					padding: 20rpx;
					border-radius: 50%;
					background-color: #F5F5F5;
				}

				.icon_bg_qq {
					padding: 20rpx;
					border-radius: 50%;
					background-color: #169BF8;
				}

				.icon_bg_weibo {
					padding: 20rpx;
					border-radius: 50%;
					background-color: #F66345;
				}

				.icon_txt {
					font-size: 28rpx;
					font-weight: bold;
					color: #707070;
				}
			}


		}

	}

	.mask_out_active {
		animation: mask_out .5s;
	}

	.mask_in_active {
		animation: mask_in .7s;
	}

	@keyframes mask_in {
		0% {
			bottom: -600rpx;
		}

		75% {
			bottom: 30rpx;
		}

		100% {
			bottom: 0rpx;
		}
	}

	@keyframes mask_out {
		0% {
			bottom: 0rpx;
		}

		100% {
			bottom: -600rpx;
		}
	}
</style>
